<template>
<div style="display: inline-block;">
  <slot v-bind:toggle="toggle"></slot>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent scrollable max-width="1000px">
      <v-card>
        <v-card-title>
          <span class="headline">客户分摊类型</span>
        </v-card-title>
        <v-divider/>
        <v-container class="py-0">
          <v-row>
            <v-col cols="12" class="py-0 form-item-border">
              <v-row align="center" style="height: 100%;">
                <label class="text-right flex-shrink-0 mx-4">分摊类型：</label>
                <div class="pr-4 flex-grow-1">
                  <v-radio-group v-model="average" row>
                    <v-radio label="均摊" :value="1"></v-radio>
                    <v-radio label="指定订单" :value="0"></v-radio>
                </v-radio-group>
                </div>
              </v-row>
            </v-col>
          </v-row>
        </v-container>
        <el-table
          ref="table"
          :data="items"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            v-if="!average"
            type="selection"
            align="center"
            width="60">
          </el-table-column>
          <el-table-column
            prop="code"
            label="订单号"
            width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="foundation_prodcut_name"
            label="客户名称"
            min-width="180">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="plan_date"
            label="人数"
            width="360">
            <template slot-scope="{ row }">
              <span class="mr-2">成人X{{row.adult_num}}</span>
              <span v-if="row.bedkid_num" class="mr-2">儿童X{{row.bedkid_num}}</span>
              <span v-if="row.leader_num">领队X{{row.leader_num}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cal_people_num"
            label="计算人数"
            min-width="140">
          </el-table-column>
        </el-table>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="cancel">取消</v-btn>
          <v-btn color="primary" @click="save">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      dialog: false,
      average: 0,
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    toggle({items = [], average = 0, selection = []}) {
      this.dialog = !this.dialog
      if(this.dialog) {
        this.items = items
        this.average = average
        this.$nextTick(() => {
          selection.length && items.forEach(row => {
            if(selection.indexOf(row.id) > -1) {
              this.$refs.table.toggleRowSelection(row);
            }
          })
        })
      }
    },
    cancel() {
      this.dialog = false
      this.$refs.table.clearSelection()
    },
    save() {
      if (!this.average && !this.multipleSelection.length) {
        return this.$message.warning('请选择订单')
      }
      this.$emit('change', {
        average: this.average,
        ids: !this.average ? this.multipleSelection.map(item => item.id) : []
      })
      this.cancel()
    }
  }
}
</script>

<style>
  .form-item-border {
    outline: 1px solid #dcdee0;
    background: #fff;
    min-height: 70px;
  }
</style>